import { Application, CameraDirection } from "@manycore/custom-ksg-viewer-sdk";
import { useCallback, useRef, useState } from "react";


export function useCustomizedInteraction(app: Application): [boolean, () => void] {
    const [enabled, setEnabled] = useState<boolean>(false);
    // 场景所在的节点
    const element = document.querySelector('.app-view-root')!;

    const global = useRef<{
        /** 状态值 */
        state: 'pan' | 'rotate' | 'zoom' | 'none',
        /** 上一次指针位置 */
        lastPointPosition: [number, number]
    }>({
        state: 'none',
        lastPointPosition: [0, 0]
    })

    const onMouseDown = useCallback((event: MouseEvent) => {
        if (event.button === 0) {
            global.current.state = 'pan';
        } else if (event.button === 1) {
            global.current.state = 'zoom';
        } else if (event.button === 2) {
            global.current.state = 'rotate';
        }

        global.current.lastPointPosition = [event.clientX, event.clientY];
    }, [])

    const onMouseMove = useCallback((event: MouseEvent) => {
        const position: [number, number] = [event.clientX, event.clientY];
        // 鼠标移动的向量
        const offset = [position[0] - global.current.lastPointPosition[0], position[1] - global.current.lastPointPosition[1]];

        const sceneWidth = element.clientWidth;
        const sceneHeight = element.clientHeight;
        // 水平向右移动的百分比
        const scaleX = offset[0] / sceneWidth;
        // 垂直向下方向移动的百分比
        const scaleY = offset[1] / sceneHeight;

        if (global.current.state === 'pan') {
            // 鼠标右移
            if (scaleX > 0) {
                // 如果不是追求特别精确 scale可以不填 其存在一个默认移动值
                app.cameraService.moveCamera({ direction: CameraDirection.Left, scale: Math.abs(scaleX * 100) });
            } else {
                app.cameraService.moveCamera({ direction: CameraDirection.Right, scale: Math.abs(scaleX * 100) });
            }

            // 鼠标下移
            if (scaleY > 0) {
                app.cameraService.moveCamera({ direction: CameraDirection.Up, scale: Math.abs(scaleY * 100) });
            } else {
                app.cameraService.moveCamera({ direction: CameraDirection.Down, scale: Math.abs(scaleY * 100) });
            }
        } else if (global.current.state === 'zoom') {

        } else if (global.current.state === 'rotate') {
            app.cameraService.rotateCameraAroundFocus({
                // 鼠标右移为正 想要实现物体向右转动 则相机需要向左移动
                horizontalAngle: scaleX * 2 * Math.PI,
                // 鼠标下移为正 想要实现物体向下 则相机需要上移
                verticalAngle: scaleY * 2 * Math.PI,
            })
        }
        global.current.lastPointPosition = position!;

    }, [])

    const onMouseWheel = useCallback((event: WheelEvent) => {
        if (event.deltaY > 0) {
            app.cameraService.moveCamera({ direction: CameraDirection.Front });
        } else {
            app.cameraService.moveCamera({ direction: CameraDirection.Back });
        }
    }, [])

    const onMouseUp = useCallback(() => {
        global.current.state = 'none';
    }, [])

    /** 切换交互模式 */
    const toggleInteractionMode = useCallback(() => {
        if (enabled) {
            // 关闭默认平移、缩放、旋转交互
            app.sceneService.config.interaction.pan.enabled.set(true);
            app.sceneService.config.interaction.zoom.enabled.set(true);
            app.sceneService.config.interaction.rotation.enabled.set(true);

            element.removeEventListener('mousedown', onMouseDown, false)
            element.removeEventListener('mousemove', onMouseMove, false);
            element.removeEventListener('mouseup', onMouseUp, false);
            element.removeEventListener('wheel', onMouseWheel, false);
        } else {
            // 关闭默认平移、缩放、旋转交互
            app.sceneService.config.interaction.pan.enabled.set(false);
            app.sceneService.config.interaction.zoom.enabled.set(false);
            app.sceneService.config.interaction.rotation.enabled.set(false);


            element.addEventListener('mousedown', onMouseDown, false);
            element.addEventListener('mousemove', onMouseMove, false);
            element.addEventListener('mouseup', onMouseUp, false);
            element.addEventListener('wheel', onMouseWheel, false);
        }
        setEnabled(enabled => !enabled);
    }, [enabled]);


    return [enabled, toggleInteractionMode];
}